<template>
  <div class="import1">
    <el-form label-width="96px" ref="form" :model="searchData">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="运输类型：">
            <el-select
              v-model="searchData.transport"
              clearable
              placeholder="请选择运输类型"
              @change="changeVal"
            >
              <el-option
                v-for="item in transports"
                :key="item.val"
                :label="item.key"
                :value="item.val"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="运输渠道：">
            <el-select
              v-model="searchData.channel"
              clearable
              placeholder="请选择运输渠道"
              @focus="selectChannel"
            >
              <el-option
                v-for="item in channels"
                :key="item.val"
                :label="item.key"
                :value="item.val"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="upload_step">
        <el-col :span="24" class="all">
          <div class="download">
            <el-button
              size="small"
              class="el-icon-download"
              type="primary"
              @click="dowload"
            >
              下载模板
            </el-button>
          </div>
          <el-upload
            class="upload-demo"
            drag
            action
            multiple
            accept=".xlsx, .xls"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleExcel"
            :disabled="disabled"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将.xls/.xlsx文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-steps
            :align-center="true"
            :active="active"
            finish-status="success"
          >
            <el-step title="开始"></el-step>
            <el-step title="校验" description="数据校验中..."></el-step>
            <el-step
              :status="status"
              :title="finishCheck || '完成'"
              :description="description"
            ></el-step>
            <el-step
              :status="status1"
              :title="`${$store.state.order.Num}%`"
              :description="`数据上传中...剩余${$store.state.order.total}条`"
            ></el-step>
            <el-step title="完成导入"></el-step>
          </el-steps>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#14142B',
            height: '28px',
            padding: '5px 0',
          }"
          :data="tableData"
          border
          style="width: 100%"
        >
          <template slot="empty">
            <img
              class="empty-img"
              src="@/assets/imgs/zanwushuju.svg"
              style="width: 64px; height: 50px"
              alt=""
            />
            <div class="noCart">暂无数据</div>
          </template>
          <el-table-column
            type="index"
            label="序号"
            width="100"
          ></el-table-column>
          <el-table-column prop="No" label="错误位置" width="300">
            <template slot-scope="scope"> 第{{ scope.row.No }}行</template>
          </el-table-column>
          <el-table-column prop="orderId" label="单号" width="300">
          </el-table-column>
          <el-table-column prop="error_msg" label="错误提示">
            <template slot-scope="scope">
              <span
                v-for="(item, i) in scope.row.error_msg"
                style="color: red; margin-right: 25px"
                :key="i"
                >{{ i + 1 }}：<i>{{ item }}</i></span
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div id="help-menu">
          <table border="1">
            <thead>
              <th width="130px">序号</th>
              <th width="1070px">下单规则</th>
            </thead>
            <tbody>
              <tr>
                <td>PS</td>
                <td>
                  多产品的订单向下填数据，序号相同，A—W、AD—AK列数据保持不变，X—AC列根据产品填写不相同数据
                </td>
              </tr>
              <tr>
                <td>1</td>
                <td>需要填写发货人电话且电话号码不能为以-0503抬头的临时号码</td>
              </tr>
              <tr>
                <td>2</td>
                <td>发货人姓名必须为全名</td>
              </tr>
              <tr>
                <td>3</td>
                <td>
                  个人通关码必填；韩国人-P个人通关码，外国人-P通关码或护照号或外国人登陆号
                </td>
              </tr>
              <tr>
                <td>4</td>
                <td>邮编5位数字必填</td>
              </tr>
              <tr>
                <td>5</td>
                <td>HS编码需要填写6位</td>
              </tr>
              <tr>
                <td>6</td>
                <td>
                  根据AD列所填选项决定填写AF-AK列内容（选Z都不填；选A必填AE、AF列；选B必填AG、AH列；C必填AI、AJ列）
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getTranSport, getChannelReceipt, handleExcel_list } from "@/api/order";
import { baseURL1 } from "@/api/request";
import globalMethod from "@/utils/ExcelToJson";
import { getClientId } from "@/utils/auth";
import store from "@/store";

export default {
  props: {
    activeName: {
      type: String,
      default: "",
    },
    activeName1: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      searchData: {},
      tableData: [],
      transports: [],
      channels: [],
      business_list: [],
      business: "",
      finishCheck: "",
      active: 0,
      status: "",
      status1: "",
      client: {},
      msg: 0,
      total: 0,
      description: "",
      disabled: false,
    };
  },
  watch: {
    activeName: {
      handler(val) {
        if (val && val === "retailers") {
          this.business = "retailers";
          this.getTranSport();
        }
      },
      immediate: true,
    },
    activeName1: {
      handler(val) {
        if (val && val === "express") {
          this.business = "express";
          this.getTranSport();
        }
      },
    },
    "$store.state.order.Num": {
      deep: true, //深度监听设置为 true
      handler: function (newVal, oldVal) {
        if (newVal === 100) {
          this.active = 4;
        }
      },
    },
    "$store.state.order.status": {
      deep: true, //深度监听设置为 true
      handler: function (newVal, oldVal) {
        console.log(newVal, "666666");
        if (newVal === 200) {
          this.active = 5;
          this.$message({
            type: "success",
            message: store.state.order.notice_content,
          });
        } else if (newVal === 411) {
          this.$message({
            type: "error",
            message: store.state.order.notice_content,
          });
        } else if (newVal === 201) {
          this.tableData = store.state.order.notice_content;
        }
      },
    },
  },
  methods: {
    //下载模板
    dowload() {
      if (this.searchData.channel) {
        window.location.href = `${baseURL1}index/dowloadMode?ticket_id=${this.searchData.channel}`;
      } else {
        this.$message({
          type: "warning",
          message: "请选择运输渠道",
        });
      }
    },
    selectChannel() {
      if (this.searchData.transport) {
      } else {
        this.$message({
          type: "warning",
          message: "请选择运输类型",
        });
      }
    },
    changeVal(val) {
      this.getChannelReceipt({ transport: val, business: this.business });
    },
    async handleExcel(file) {
      if (this.searchData.channel) {
        const extension = file.name.substring(file.name.lastIndexOf("."));
        if (extension !== ".xls" && extension !== ".xlsx") {
          this.$message.warning("只能上传excel的文件");
        } else {
          let ExcelJsonData = globalMethod.ExcelToJson(file);
          const obj = await ExcelJsonData;
          this.active = 2;
          obj.splice(0, 1);
          const option = await handleExcel_list({
            data: obj,
            business: this.business,
            channel_id: this.searchData.channel,
            client_id: getClientId().client_id,
          });
          if (option.data.status === 200) {
            this.status = "success";
            this.active = 3;
            this.finishCheck = "校验成功";
            this.description = option.data.msg;
          } else {
            this.disabled = false;
            this.status = "error";
            this.active = 3;
            this.finishCheck = "校验失败";
            this.tableData = option.data.msg;
          }
        }
      } else {
        this.$message({
          type: "warning",
          message: "请选择运输类型",
        });
      }
    },
    reset() {
      this.tableData = [];
      this.finishCheck = "";
      this.active = 0;
      this.status = "";
      this.status1 = "";
      this.client = {};
      this.msg = 0;
      this.total = 0;
      this.description = "";
      this.disabled = false;
    },
    async getTranSport() {
      const res = await getTranSport();
      if (res.data.status === 200) {
        this.transports = res.data.data;
      }
    },
    async getChannelReceipt(data) {
      const res = await getChannelReceipt(data);
      if (res.data.status === 200) {
        this.channels = res.data.data;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.notice {
  font-size: 14px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 600px;
  height: 180px;
  color: #a9a9a9;
  margin-right: 5px;

  div {
    text-align: left;
  }
}

.all {
  display: flex;
  align-items: center;
  justify-content: center;
}

.download .el-button {
  height: 178px;
  background-color: #2e82ff;
  border-color: #2e82ff;
  font-size: 14px;
}

.import1 {
  padding: 10px 0;
}

.upload_step {
  display: flex;
  align-items: center;
}

.download {
  text-align: left;
  margin: 5px;
}

.el-select {
  display: block;
}

.el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form-item__label {
  text-align: center;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}
</style>
<style lang="scss" scoped>
#help-menu {
  position: relative;

  table {
    border-collapse: collapse;

    thead th:nth-child(1) {
      width: 100px;
      height: 35px;
      background: #2e82ff;
      border: 1px solid #2e82ff;
      text-align: left;
      color: #fff;
      font-size: 15px;
      padding-left: 10px;
    }

    thead th:nth-child(2) {
      width: 1765px;
      background: #2e82ff;
      border: 1px solid #2e82ff;
      text-align: left;
      color: #fff;
      font-size: 15px;
      padding-left: 10px;
    }

    tbody tr {
      height: 35px;

      td {
        padding-left: 10px;
        text-align: left;
        font-size: 14px;
      }
    }
  }
}
</style>
